<template>
    <div>
        <el-date-picker
            v-model="valuedata"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
        <div id='main'>柱状图</div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios'
//mounted生命周期写echarts实例挂载到Dom节点和X轴，y轴数据从后端取值；通过option属性绑定X轴，y轴数据，将图形效果渲染到echarts实例中
export default{
    data(){
        return{
            pickdata:{
            starttime:'',
            endtime:'',
            selectdata:''
        },
        myChart:'',
        valuedata: [],
        tableData: [],
        xAxis: [],
        yAxis: []
        }
    },
    mounted(){
        this.fetchData();
        this.initChart();
    },
    methods:{
        fetchData() {
      // 从后端获取数据的逻辑
      // 假设使用axios获取数据
            this.pickdata.starttime=this.valuedata[0]
            this.pickdata.endtime=this.valuedata[1]
            console.log(this.pickdata)
            axios.get('/oeedata',{params:this.pickdata}).then(res=>{
            this.tableData=res.data.data
            console.log(this.tableData)
            this.tableData.forEach((item)=>{
                this.xAxis.push(item.equip_code)
                this.yAxis.push(item.last_time)
            })
            this.xAxis=this.xAxis.splice(0,4)
            this.yAxis=this.yAxis.splice(0,4)
            console.log(this.xAxis)
            console.log(this.yAxis)
            this.updateChart();
            this.xAxis=[]
            this.yAxis=[]
            })
        },
        initChart() {
            var chartDom = document.getElementById('main');
            this.myChart = echarts.init(chartDom);
        },
        updateChart() {
        if (this.myChart && this.xAxis && this.yAxis) {
            let option = {
                title: {
                    text: '柱状图动态读取'
                },
                tooltip: {},
                legend: {
                    data: ['状态持续时间']
                },
                xAxis: {
                    data: this.xAxis
                },
                yAxis: {},
                series: [
                    {
                    name: '状态持续时间',
                    type: 'bar',
                    data: this.yAxis,
                    // 柱条的颜色（color）；
                    // 柱条的描边颜色（borderColor）、宽度（borderWidth）、样式（borderType）；
                    // 柱条圆角的半径（barBorderRadius）；
                    // 柱条透明度（opacity）；
                    // 阴影（shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY）
                    itemStyle:{
                        // color:'#91cc75',
                        opacity: 0.9,
                        borderRadius: 3,
                        borderWidth: 2,
                        // borderType: 'solid',
                        borderColor: '#73c0de',
                        // shadowColor: '#5470c6',
                        // shadowBlur: 3,
                        // shadowOffsetX:6,
                        // shadowOffsetY:6
                    }
                    }
                ]
            };
            this.myChart.setOption(option);
        }
        }
    }
}
</script>
<style scoped>
#main{
    width: 800px;
    height: 500px;
    margin: 20px auto;
}
.el-button{
    margin-left: 10px;
}
</style>